import styles from './booking.module.scss'
import { Button, DatePicker, Form, Input, Select, message } from 'antd';
import { addBooking, getCurrentDate } from '@/request/api'
import { useNavigate } from 'react-router-dom'
import {
  LeftOutlined
} from '@ant-design/icons';

const { RangePicker } = DatePicker;
const { Option } = Select;
const rangeConfig = {
  rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
};

const op = [
  {
    id: 1,
    value: "标间----------￥99一天"
  }, {
    id: 2,
    value: "大床房-------￥129一天"
  }, {
    id: 3,
    value: "三人床-------￥159一天"
  }, {
    id: 4,
    value: "四人床-------￥199一天"
  }, {
    id: 5,
    value: "电脑房-------￥299一天"
  }, {
    id: 6,
    value: "豪华房-------￥399一天"
  }, {
    id: 7,
    value: "总统套房-----￥499一天"
  }
]

const View = () => {

  const navigate = useNavigate()
  const [form] = Form.useForm(); //定义form

  const onFinish = async (values: FieldType) => {
    const timeValue: any[] = values.checkInTime;
    const time = new Date()
    let params: BookingRes = {
      ...values,
      bkBeginDate: timeValue[0].format('YYYY-MM-DD'),
      bkEndDate: timeValue[1].format('YYYY-MM-DD'),
      bkSumbitDate: getCurrentDate(time.toLocaleString('en-US', { hour12: false }).split(" ")),
      bkState: 1
    }
    delete params['checkInTime']
    const { code } = await addBooking(params)
    if (code == 0) {
      message.success({ content: "预定成功！", duration: 5 })
      //更新输入框的值
      form.setFieldsValue({
        bkName: "",
        bkPhone: "",
        roomType: "",
        checkInTime: ""
      })
    }
  };

  const goHome = () => {
    navigate('/official')
  }

  return (
    <div className={styles.box}>
      <a className={styles.goHome} onClick={goHome}><LeftOutlined /></a>

      <div className={styles.title}>桂林信科酒店欢迎您</div>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
        form={form}
      >
        <Form.Item<FieldType>
          label="预定姓名"
          name="bkName"
          rules={[{ required: true, message: '姓名不能为空！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="预定电话"
          name="bkPhone"
          rules={[{ required: true, message: '电话不能为空！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item name="roomType" label="房间类型" rules={[{ required: true, message: '请选择房间类型！' }]}>
          <Select
            placeholder="请选择房间类型"
            allowClear
          >
            {op.map(item => {
              return (
                <Option value={item.id} key={item.id}>{item.value}</Option>
              )
            })}
          </Select>
        </Form.Item>

        <Form.Item name="checkInTime" label="入住时间" {...rangeConfig} rules={[{ required: true, message: '请选择入住时间！' }]}>
          <RangePicker showTime format="YYYY-MM-DD" />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            预定
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default View